解释：
<!--设置盒子样式-->
.box{width:404px;height:304px;border:2px solid blue;margin:50px auto;position:relative;}
<!--设置模块样式-->
.one{width:100px;height:40px;text-align:center;color:write;font-size:30px}
<!--设置导航样式-->
.one .top{width:100%;height:100%;line-height:40px}
<!--设置分块内容样式-->
.one .bot{width:400px;height:258px;line-height:258px;position:absolute;left:0;top:42px;}
<!--鼠标移动到该处，则会显示该板块，层级高，则优先显示该层级-->
.one:hover .bot{z-index:9;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href=".\rerest.css">
<style type="text/css">
.box{width:404px;height:304px;border:2px solid blue;margin:50px auto;position:relative;}
.one{width:100px;height:40px;text-align:center;color:write;font-size:30px}
.one .bot{width:400px;height:258px;line-height:258px;position:absolute;left:0;top:42px;}
.one:hover .bot{z-index:9;}
</style>
</head>
<body>
<div class="box">
<div class="one fl">
<!--fl 为导入文件rerest.css设定样式-->
<p class="top" style="background:orange">1</p>
<p class="bot" style="background:orange; z-index:1">1</p>
<!-- 设置默认层级为1,-->
</div>
<div class="one fl">
<p class="top" style="background:#E1EFFF">2</p>
<p class="bot" style="background:#E1EFFF">2</p>
</div>
<div class="one fl">
<p class="top" style="background:#f2f2af">3</p>
<p class="bot" style="background:#f2f2af">3</p>
</div>
<div class="one fl">
<p class="top" style="background:#f2f2f2">4</p>
<p class="bot" style="background:#f2f2f2">4</p>
</div>
</div>
</body>
</html>
返回值：